<!DOCTYPE html>
<html>
<head>
<title>My App</title>
<meta name="viewport"
	content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, minimal-ui">
<link rel="stylesheet" href="app.min.css">
<style>
/* TODO */
</style>
</head>

<body>
	<!-- Homepage -->
	<div class="app-page" data-page="home">
		<!-- Homepage topbar -->
		<div class="app-topbar">
			<div class="app-title">Home page</div>
		</div>
		<!-- Homepage content -->
		<div class="app-content">
			<div class="app-section">
				<!-- button to page 2 -->
				<div class="app-button" data-target="page2">Go to Page 2</div>
			</div>
		</div>
	</div>

	<!-- page 2 -->
	<div class="app-page" data-page="page2">
		<!-- page 2 topbar -->
		<div class="app-topbar">
			<!-- back button to homepage -->
			<div class="app-button left" data-back data-autotitle></div>
			<div class="app-title">Page 2</div>
		</div>
		<!-- page 2 content -->
		<div class="app-content">Page 2 is lonely</div>
	</div>

	<script src="zepto.js"></script>
	<script src="app.min.js"></script>
	<script>
		App.controller('home', HomeController);

		App.controller('page2', function(page) {
			// put stuff here
		});

		try {
			App.restore();
		} catch (err) {
			App.load('home');
		}

		/**
		* defined business logic in home controller
		*/
		function HomeController(page) {
			// this runs whenever a 'home' page is loaded
			this.foo = 'bar';
			this.print();
		}
		
		HomeController.prototype.print = function() {
			console.log(this.foo);
		};
	</script>
</body>
</html>
